<template>
  <div class="bot-cart" v-if="Object.keys(cartGoods).length !== 0">
    <div class="main">
      <div class="head">
        <div class="image"><img :src="cartGoods.skus[0].img" alt="" /></div>
        <div class="info">
          <div class="price">{{ cartGoods.priceRange }}</div>
          <div class="kucun">库存：{{ cartGoods.totalStock }}</div>
          <div>请选择：{{ cartGoods.styleKey + " " + cartGoods.sizeKey }}</div>
        </div>
        <div class="close"><button @click="closeCart">关闭</button></div>
      </div>
      <div class="content">
        <div class="select">
          <p>{{ cartGoods.styleKey }}</p>
          <div class="colors">
            <span
              :key="index"
              v-for="(item, index) in cartGoods.props[0].list"
              :class="{ active: colorIndex === index }"
              @click="selectedColor(index)"
            >
              {{ item.name }}
            </span>
          </div>

          <p>{{ cartGoods.sizeKey }}</p>
          <div class="size">
            <span
              :key="index"
              v-for="(item, index) in cartGoods.props[1].list"
              :class="{ active: sizeIndex === index }"
              @click="selectedSize(index)"
            >
              {{ item.name }}
            </span>
          </div>
          <p>数量</p>
          <div class="count">
            <span @click="sub">-</span>
            <span>{{count}}</span>
            <span @click="add">+</span>
          </div>
        </div>
      </div>
     
    </div>
     <div class="ok" @click="ok">确定</div>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll.vue";
export default {
  components: { Scroll },
  name: "DetailBotCart",
  data() {
    return {
      colorIndex:0,
      sizeIndex:0,
      count:1
    };
  },
  props: {
    cartGoods: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    closeCart() {
      this.$emit("close");
    },
    selectedColor(index) {
      this.colorIndex = index;
    },
    selectedSize(index) {
      this.sizeIndex = index;
    },
    sub(){
      if (this.count>0) {
        this.count-=1;
      }
    },
    add(){
      this.count+=1
    },
    // 确定按钮 传递三个参数用于获取当前选择的 颜色 尺寸 数量
    ok() {
      this.$emit("okAddCart",this.colorIndex,this.sizeIndex,this.count);
    },
  },
};
</script>

<style scoped>
.content{
  height: 230px;
  overflow: scroll;
}
.bot-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 400px;
  background: #fff;
  z-index:10;
}
.main{
  margin-left: 5%;
}
.close {
  margin-left: 85%;
}
.close button {
  outline: none;
  background: #fff;
  border: 1px solid #999;
}
.head {
  position: relative;
  margin: 5% 0;
}
.image {
  position: absolute;
  top: -60px;
  width: 25%;
}
.image img {
  width: 100%;
  border-radius: 10px;
}
.info {
  width: 40%;
  margin-left: 30%;
}
.info .price {
  color: var(--color-tint);
  font-size: 22px;
}
.info .kucun {
  margin: 5% 0;
}

.select p {
  margin-top: 20px;
}
.colors,
.size {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
}
.select span {
  display: block;
  border: 1px solid #999;
  padding: 5px;
  border-radius: 5px;
  margin: 5px 5px 0 0;
  font-size: 14px;
  text-align: center;
}
.count{
  display: flex;
}
.select .count span{
  padding: 5px 10px;
  font-size: 16px;
}

.ok {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: var(--color-tint);
  color: #fff;
  text-align: center;
  line-height: 40px;
}
.active {
  background: var(--color-tint);
  border: 0;
  color: #fff;
}
</style>
